<template>
	<view class="login-container clearfix">
		<view class="login-wrap">
			<view class="login-text">登录</view>
			<view class="phone">
				<image src="../../static/login/phone.png" mode="aspectFit" class="ph"></image>
				<input type="text" placeholder="账号" v-model="dataForm.username">
			</view>
			<view class="password">
				<image src="../../static/login/password.png" mode="aspectFit" class="ps"></image>
				<input  placeholder="请输入密码" v-model="dataForm.password" :password="showPW" />
				<image src="../../static/login/open.png" mode="aspectFit" class="open" @tap="showPassword"></image>
			</view>
			<view class="captche">
				<input type="text" placeholder="请输入验证码" v-model="dataForm.captcha" />
				<image :src="captchePath" mode="aspectFit" class="captche-img" @tap="getCaptche"></image>
			</view>
			<view class="login">
				<button type="primary" class="btn-lg" @tap="signIn">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { throttled1 } from '../../common/js/common.js';
	
	export default {
		name: "Login",
		data(){
			return{
				showPW: true,
				dataForm: {
					username: 'gsxh-admin',
					password: '123456',
					uuid: '',
					captcha: ''
				},
				captchePath: ''
			}
		},
		methods: {
			// 切换密码显示
			showPassword(){
				if(this.showPW){
					this.showPW =false;
					setTimeout(() => {
						this.showPW = true;
					},1500)
				}
			},
			getUUID(){
				 return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
				    return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
				  })
			},
			// 获取登录验证码
			getCaptche(){
				this.dataForm.uuid = this.getUUID();
				uni.$http({
					url: `/captcha?uuid=${this.dataForm.uuid}`,
					method:'GET',
					responseType: 'arraybuffer'
				}).then((data) => {
					this.captchePath = this.getBase64ImageUrl(data[1].data);
					this.getBase64ImageUrl(data[1].data);
				});
			},
			// 登录前的校验函数
			validataLogon(){
				if(!this.dataForm.username || !this.dataForm.password){
					uni.showToast({
						title: '账号或密码不能为空',
						icon:'none'
					});
					return false
				};
				if(!this.dataForm.captcha){
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					});
					return false;
				};
				
				return true;
			},
			// 登录函数句柄
			signInHandler(){
				if(!this.validataLogon()) return;
				
				uni.$http({
					url: '/login',
					method:"POST",
					data: this.dataForm
				}).then((data) => {
					const _data = data[1].data;
					
					
					if(_data.msg !== "success"){
						uni.showToast({
							title: _data.msg,
							icon:'none'
						});
						this.getCaptche();
						return;
						
					};
					
					uni.setStorageSync('token', _data.data.token);
					this.$store.commit('setUsername',this.dataForm.username);
					
					if(this.dataForm.username == 'fwzt-admin' || this.dataForm.username == 'admin'){
						uni.navigateTo({
							url: '/shopReception/pages/index/index'
						});
					}else{
						uni.navigateTo({
							url: '/areaAdmin/pages/index/index'
						})
					}

				})
			},
			 // 将后端返回的图片的 arraybuffer 转换为 图片的 base64编码
			getBase64ImageUrl(base64Url) {
			    var base64Data = base64Url;
			    base64Data = uni.arrayBufferToBase64(base64Data);
			    const base64ImgUrl = "data:image/png;base64," + base64Data;
			    return base64ImgUrl;
			},
		},
		onShow(){
			this.getCaptche();
		},
		created(){
			// 登录
			this.signIn = throttled1(this.signInHandler,2000);
		}
	}
</script>

<style lang="scss">
	page{
		height: 100% !important;
	}
	
	.login-container{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		background-color: #356363;
	}
	
	.login-container .login-wrap{
		display: flex;
		flex-direction: column;
		width: 545rpx;
		height: 650rpx;
		background-color: #fff;
		border-radius: 50px;
	}
	
	/* 登录标题 */
	.login-container .login-wrap .login-text{
		width: 150rpx;
		height: 100rpx;
		margin-top: 50rpx;
		margin-left: 80rpx;
		line-height: 100rpx;
		font-family: Arial, Helvetica, sans-serif;
		color: #000;
		font-size: 60rpx;
	}
	
	.login-container .phone{
		display: flex;
		width: 450rpx;
		height: 80rpx;
		border-bottom: 3rpx solid rgb(58, 57, 57);
		margin-top: 30rpx;
		margin-left: 35rpx;
		
		.ph{
			width: 55rpx;
			height: 55rpx;
			margin-top: 5rpx;
			margin-left: 30rpx;
		}
		
		input{
			width: 200rpx;
			font-size: 25rpx;
			margin-top: 15rpx;
			margin-left: 30rpx;
		}
	}
	
	.login-container .password{
		display: flex;
		width: 450rpx;
		height: 80rpx;
		border-bottom: 3rpx solid rgb(58, 57, 57);
		margin-top: 30rpx;
		margin-left: 35rpx;
		
		.ps{
			width: 55rpx;
			height: 55rpx;
			margin-top: 5rpx;
			margin-left: 30rpx;
		}
		
		input{
			width: 200rpx;
			font-size: 25rpx;
			margin-top: 15rpx;
			margin-left: 30rpx;
		}
		
		.open{
			width: 55rpx;
			height: 55rpx;
			margin-top: 5rpx;
			margin-left: 65rpx;
		}
		
	}
	.login-container .login{
		margin-top: 50rpx;
		
		button{
			width: 450rpx;
			height: 80rpx;
		}
	}
	
	.login-container .captche{
		display: flex;
		width: 450rpx;
		height: 80rpx;
		border-bottom: 3rpx solid rgb(58, 57, 57);
		margin-top: 30rpx;
		margin-left: 35rpx;
		
		input{
			width: 300rpx;
			font-size: 25rpx;
			margin-top: 15rpx;
			margin-left: 30rpx;
		}
		
		image{
			display: block;
			height: 80rpx;
			width: 150rpx;
			border: 1px ;
			box-sizing: border-box;
		}
	}
</style>